<template>
  <van-tabbar
    v-if="$route.meta.navShow"
    id="root-tabbar"
    class="m-w-375 m-auto nav-bar"
    v-model="tabbarActive"
    :active-color="activeColor"
    inactive-color="#999999"
    :safe-area-inset-bottom="true"
    @change="openTabbar"
  >
    <van-tabbar-item :name="item.name" class="nav-bar-item" v-for="item in tabbarList" :key="item.name">
      <span>{{item.i18nName}}</span>
      <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.inactive">
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem, Icon } from 'vant'

import i18n from '../../i18n'

export default {
  name: 'NavBar',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Icon.name]: Icon
  },
  props: {
    /**
     * @type {Array<{ title: string, name: string, active: string, inactive: string}>}
     */
    propslist: {
      type: Array,
      default () {
        return []
      }
    },
    activeColor: {
      type: String,
      default: '#0B8BEF'
    }
  },
  data () {
    return {
      tabbarBeforeActive: '首页',
      tabbarActive: '首页',
      tabbarList: [],
      width: 318
    }
  },
  watch: {
    $route: function (value) {
      this.updateActive(value.path)
    },
    tabbarActive (newVal, oldVal) {
      this.tabbarBeforeActive = oldVal
      console.log('newVal, oldVal', newVal, oldVal)
    }
  },
  computed: {
  },
  methods: {
    /**
     * 更新高亮
     * @param {string} path 路由路径
    */
    updateActive (path) {
      for (let i = 0; i < this.tabbarList.length; i++) {
        const item = this.tabbarList[i]
        if (item.path === path) {
          // debugger
          this.tabbarActive = item.name
          break
        }
        this.tabbarActive = ''
      }
    },
    /**
     * 获取底部导航数据
     */
    async getTabbarList () {
      this.tabbarList = [
        {
          id: 1,
          name: '首页',
          i18nName: i18n.t('tabbar.Home'),
          path: '/home',
          active: require('../../assets/images/home_active.png'),
          inactive: require('../../assets/images/home.png')
        },
        {
          id: 2,
          name: '活动',
          i18nName: i18n.t('tabbar.Activity'),
          path: '/activity',
          active: require('../../assets/images/activity_active.png'),
          inactive: require('../../assets/images/activity.png')
        },
        {
          id: 3,
          name: '用户',
          i18nName: i18n.t('tabbar.user'),
          path: '/user',
          active: require('../../assets/images/user-tab-active.png'),
          inactive: require('../../assets/images/user-tab.png')
        }
      ]
      this.updateActive(this.$route.path)
    },
    /**
     * @param {string} name
     */
    openTabbar (name) {
      const item = this.tabbarList.find(e => {
        return e.name === name
      })
      this.$router.push(item.path)
    }
  },
  mounted () {
    this.getTabbarList()
  }
}
</script>

<style lang="less" scoped>
.nav-bar {
  position: fixed;
  z-index: 1239;
  height: auto;
  .nav-bar-item {
    padding: 6px 0 8px;
  }
  @keyframes showAnimation {
    100% {
      bottom: 60px
    }
  }
  .show {
    animation: showAnimation 300ms;
    animation-fill-mode: forwards;
  }
  .wrapper {
    position: fixed;
    width: 350px;
    // max-height: 200px;
    background-color: #fff;
    bottom: -300px;
    left: 50%;
    transform: translate(-50%);
    border-radius: 12px;
    .navBar-grid-swipe {
      padding-top: 10px;
    }
    .arrow-down-p {
      text-align: center;
      margin-top: -10px;
      height: 30px;
    }
  }
}
</style>
